<%-- 
    Document   : profile
    Created on : Dec 20, 2013, 12:07:14 PM
    Author     : Administrator
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="../Include/header.jsp" %>
<c:choose>
    <c:when test="${empty sessionScope.USER}">
        <c:redirect url="Home"/>
    </c:when>
    <c:otherwise>
        <div class="container">
            <script type="text/javascript">
                function checkValidPassword(password){
                    var regex = new RegExp("^.{6,30}$");
                    return regex.test(password);
                }

                function checkValidEmail(email){
                    var regex = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?");
                    return regex.test(email);
                }

                function checkValidFullname(fullname){
                    var regex = new RegExp(".{3,100}$");
                    return regex.test(fullname);
                }

                function checkValidConfirm(confirm, password){
                    return confirm === password;
                }

                function checkValidEditProfile(){
                    var fullname = document.getElementById("fullname").value;
                    var email = document.getElementById("email").value;

                    if(!checkValidFullname(fullname)){
                        document.getElementById("invalid-fullname").classList.remove("hidden");
                        return false;
                    }else{
                        if(!document.getElementById("invalid-fullname").classList.contains("hidden")){
                            document.getElementById("invalid-fullname").classList.add("hidden");
                        }
                    }


                    if(!checkValidEmail(email)){
                        document.getElementById("invalid-email").classList.remove("hidden");
                        return false;
                    }else{
                        if(!document.getElementById("invalid-email").classList.contains("hidden")){
                            document.getElementById("invalid-email").classList.add("hidden");
                        }
                    }

                    return true;
                }   

                function checkValidChangePassword(){
                    var password = document.getElementById("password").value;
                    var newPassword = document.getElementById("new-password").value;
                    var confirm = document.getElementById("confirm").value;

                    if(!checkValidPassword(password)){
                        document.getElementById("invalid-password").classList.remove("hidden");
                        return false;
                    }else{
                        if(!document.getElementById("invalid-password").classList.contains("hidden")){
                            document.getElementById("invalid-password").classList.add("hidden");
                        }
                    }

                    if(!checkValidPassword(newPassword)){
                        document.getElementById("invalid-new-password").classList.remove("hidden");
                        return false;
                    }else{
                        if(!document.getElementById("invalid-new-password").classList.contains("hidden")){
                            document.getElementById("invalid-new-password").classList.add("hidden");
                        }
                    }


                    if(!checkValidConfirm(confirm, newPassword)){
                        document.getElementById("invalid-confirm").classList.remove("hidden");
                        return false;
                    }else{
                        if(!document.getElementById("invalid-confirm").classList.contains("hidden")){
                            document.getElementById("invalid-confirm").classList.add("hidden");
                        }
                    }

                }
            </script>

            <script type="text/javascript">
                function editProfile(){
                    $("#profie-form .form-group:not(.form-group:first-of-type) label").each(function(){
                        $(this).removeClass("text-right");
                        $(this).addClass("control-label");
                    });

                    $(".input-info").each(function(){
                        $(this).removeClass("hidden");
                    });

                    $(".info").each(function(){
                        $(this).addClass("hidden");
                    });

                    $("#hide-btn").removeClass("hidden");

                    $("#edit-profile").addClass("hidden");

                }

                function cancelEdit(){
                    $("#profie-form .form-group:not(.form-group:first-of-type) label").each(function(){
                        $(this).removeClass("control-label");
                        $(this).addClass("text-right");
                    });

                    $(".input-info").each(function(){
                        $(this).addClass("hidden");
                    });

                    $(".info").each(function(){
                        $(this).removeClass("hidden");
                    });

                    $("#hide-btn").addClass("hidden");

                    $("#edit-profile").removeClass("hidden");
                }
            </script>
            <div class="row">
                <div class="user-profile-form login login-warning">
                    <div class="login-heading"><h3 class="login-title">Thông Tin Cá Nhân
                            <c:if test="${not empty requestScope.MESSAGE_UPDATE}">
                                <br/><p class="invalid-mess">${requestScope.MESSAGE_UPDATE}</p>
                            </c:if>
                        </h3></div>
                    <div class="login-body">
                        <div>
                            <form class="form-horizontal col-xs-6 col-xs-offset-3" id="profie-form" role="form" onsubmit="return checkValidEditProfile()" action="User" method="POST">
                                <div class="form-group"><label class="col-xs-4 text-right">Tên đăng nhập</label><div class="col-xs-8">${sessionScope.USER.username}</div></div>
                                <div class="form-group">
                                    <label class="col-xs-4 text-right">Họ tên</label>
                                    <div class="col-xs-8">
                                        <span class="info">${sessionScope.USER.fullName}</span>
                                        <span class="input-info hidden"><input type="text" value="${sessionScope.USER.fullName}" class="form-control" id="fullname" name="fullName"></span>
                                            <c:if test="${not empty requestScope.MESSAGE_FULLNAME_FAIL}">
                                            <br/><p class="invalid-mess">${requestScope.MESSAGE_FULLNAME_FAIL}</p>
                                        </c:if>
                                    </div>
                                </div>
                                <div class="col-md-offset-6">
                                    <p class="invalid-mess hidden" id="invalid-fullname">Họ tên không hợp lệ</p>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-4 text-right">Email</label>
                                    <div class="col-xs-8">
                                        <span class="info">${sessionScope.USER.email}</span>
                                        <span class="input-info hidden"><input type="text" value="${sessionScope.USER.email}" class="form-control" id="email" name="email"></span>
                                            <c:if test="${not empty requestScope.MESSAGE_EMAIL_FAIL}">
                                            <br/><p class="invalid-mess">${requestScope.MESSAGE_EMAIL_FAIL}</p>
                                        </c:if>
                                    </div>
                                </div>
                                <div class="col-md-offset-6">
                                    <p class="invalid-mess hidden" id="invalid-email">Email không hợp lệ</p>
                                </div>
                                <div class="form-group hidden" id="hide-btn"><input class="btn btn-warning col-xs-2 col-xs-offset-6" type="button" value="Hủy" onclick="cancelEdit()">
                                    <input type="hidden" name="action" value="Change Profile" />
                                    <input class="btn btn-success col-xs-2 col-xs-offset-1" type="submit" value="Lưu">
                                </div>          
                            </form>

                            <button class="btn btn-success col-xs-offset-5" id="edit-profile" onclick="editProfile()">Sửa</button>
                        </div>
                        <div class="clearfix"></div>
                        <hr/>
                        <form class="form-horizontal col-xs-6 col-xs-offset-3" role="form" id="change-pass-form" onsubmit="return checkValidChangePassword()" action="User" method="POST">
                            <!-- <p class="invalid-mess text-center">Invalid username or password</p> -->
                            <div class="form-group">
                                <label class="col-xs-4 control-label">Mật khẩu</label>
                                <div class="col-xs-8">
                                    <input type="password" class="form-control" id="password" placeholder="Mật khẩu" name="current">
                                    <c:if test="${not empty requestScope.MESSAGE_CURRENT_PASSWORD_FAIL}">
                                        <br/><p class="invalid-mess">${requestScope.MESSAGE_CURRENT_PASSWORD_FAIL}</p>
                                    </c:if>
                                </div>
                            </div>
                            <div class="col-xs-offset-6">
                                <p class="invalid-mess hidden" id="invalid-password">Invalid password!</p>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-4 control-label">Mật khẩu mới</label>
                                <div class="col-xs-8">
                                    <input type="password" class="form-control" id="new-password" placeholder="Mật khẩu mới" name="password">
                                    <c:if test="${not empty requestScope.MESSAGE_PASSWORD_FAIL}">
                                        <br/><p class="invalid-mess">${requestScope.MESSAGE_PASSWORD_FAIL}</p>
                                    </c:if>
                                </div>
                            </div>
                            <div class="col-md-offset-6">
                                <p class="invalid-mess hidden" id="invalid-new-password">Invalid password!</p>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-4 control-label">Nhập lại</label>
                                <div class="col-xs-8">
                                    <input type="password" class="form-control" id="confirm" placeholder="Nhập lại" name="confirm">
                                    <c:if test="${not empty requestScope.MESSAGE_CONFIRM_FAIL}">
                                        <br/><p class="invalid-mess">${requestScope.MESSAGE_CONFIRM_FAIL}</p>
                                    </c:if>
                                </div>
                            </div>
                            <div class="col-md-offset-6">
                                <p class="invalid-mess hidden" id="invalid-confirm">Mật khẩu nhập lại không đúng!</p>
                            </div>
                            <div class="form-group">
                                <input type="hidden" name="action" value="Change Password" />
                                <input type="submit" class="btn btn-success col-xs-4 col-xs-offset-4" value="Đổi mật khẩu">
                            </div>
                        </form>
                    </div>
                </div>

                <div class="user-info-form login login-warning">
                    <div class="login-heading"><h3 class="login-title">Thông Tin Tài Khoản</h3></div>
                    <div class="login-body">
                        <div><label class="col-xs-7">Thứ hạng</label>2</div>
                        <div class="clear"></div>
                        <div><label class="col-xs-7">Điểm</label>1324</div>
                        <div class="clear"></div>
                        <div><label class="col-xs-7">Cấp</label>23</div>
                        <div class="clear"></div>
                        <div><label class="col-xs-7">Phòng đã tạo</label>20</div>
                        <div class="clear"></div>
                        <div><label class="col-xs-7">Phòng tham gia</label>122</div>
                        <div class="clear"></div>
                    </div>
                </div>
                                            
                                            
            </div>
        </div>
    </c:otherwise>
</c:choose>
<%@include file="../Include/footer.jsp" %>
